<!--个人中心-->
<template>
  <div class="container user">
    <UserSidebar />
    <div class="user-frame">
      <div class="user-panel">
        <div class="user-fast">
          <div class="userinfo-panel">
            <div class="name-frame">
              <div class="nick-name">
                <span class="name">{{ userInfo.nick_name }}</span>
                <div class="job">{{ userInfo.job_title }}</div>
              </div>
              <div class="icon-panel ac-bg" @click="updateUserInfo">
                <img class="icon" src="@/assets/imgs/user/edit.png" />
              </div>
            </div>
            <div class="info-frame">
              <div class="info-left">
                <p class="info-panel">
                  <span class="label">Birthday:</span>
                  <span class="text">{{ userInfo.birth_date }}</span>
                </p>
                <p class="info-panel">
                  <span class="label">Country:</span>
                  <span class="text">{{ userInfo.country_name }}</span>
                </p>
                <p class="info-panel">
                  <span class="label">Sex:</span>
                  <span class="text">{{ userInfo.sex }}</span>
                </p>
              </div>
              <div class="info-right">
                <span class="title">About</span>
                <div class="right-panel">
                  {{ userInfo.description }}
                </div>
              </div>
            </div>
            <div class="sign-frame" v-if="isMobile" @click="clickAccount">
              <p>My members</p>
            </div>
          </div>
          <div class="column-frame">
            <div class="column-panel">
              <div
                class="menu-frame ac-bg"
                v-for="(item, index) in menuList"
                :key="index"
                @click="clickMenu(index)"
              >
                <div class="menu-panel">
                  <div class="menu-fast">
                    <van-icon class="menu-icon" :name="item.icon" />
                  </div>
                </div>
                <div class="menu-label">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-frame" v-if="!isMobile">
          <div class="right-panel">
            <span class="panel-title">My Blog</span>
            <div class="right-fast" ref="blogPanel">
              <div class="img-panel">
                <div
                  class="img-fast"
                  v-for="(item, index) in myBlog.list"
                  :key="'blog' + index"
                >
                  <van-image
                    class="img"
                    lazy-load
                    fit="cover"
                    :src="item.photo_brief"
                    @click="clickBlog(item)"
                  />
                </div>
              </div>
              <DefalutLoadMore
                style="margin: 0 auto"
                :loadType="myBlog.loadType"
                hideTips
              />
            </div>
            <div class="line">
              <div class="line-o"></div>
              <div class="line-o"></div>
              <div class="line-o"></div>
            </div>
          </div>
          <div class="right-panel">
            <span class="panel-title">Blog Recommend</span>
            <div class="right-fast" ref="commentPanel">
              <div class="img-panel">
                <div
                  class="img-fast"
                  v-for="(item, index) in myComment.list"
                  :key="'favo' + index"
                >
                  <van-image
                    class="img"
                    lazy-load
                    :src="item.article[0].photo_brief"
                    fit="cover"
                    @click="clickBlog(item)"
                  />
                </div>
              </div>
              <DefalutLoadMore
                style="margin: 0 auto"
                :loadType="myComment.loadType"
                hideTips
              />
            </div>
            <div class="line">
              <div class="line-o"></div>
              <div class="line-o"></div>
              <div class="line-o"></div>
            </div>
          </div>
          <div class="right-panel">
            <span class="panel-title">My Favorite</span>
            <div class="right-fast" ref="favoritePanel">
              <div class="img-panel">
                <div
                  class="img-fast"
                  v-for="(item, index) in myFavorite.list"
                  :key="'favo' + index"
                >
                  <van-image
                    class="img"
                    lazy-load
                    fit="cover"
                    v-if="item.product"
                    :src="item.product.pic"
                    @click="clickFavo(item)"
                  />
                </div>
              </div>
              <DefalutLoadMore
                style="margin: 0 auto"
                :loadType="myFavorite.loadType"
                hideTips
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool";
export default {
  data() {
    return {
      menuList: [
        {
          icon: "orders-o",
          name: "MY ORDERS",
          url: "/user/order",
        },
        {
          icon: "like-o",
          name: "MY FAVORITE",
          url: "/user/collection",
        },
        {
          icon: "setting-o",
          name: "MY SETTINGS",
          url: "/user/setting",
        },
        {
          icon: "revoke",
          name: "EXIT",
          url: "",
        },
      ],
      isSignIn: false, //是否可以签到
      myBlog: {
        list: [],
        loadType: 2,
        total: 0,
        loading: false,
        form: {
          page: 1,
          page_size: 10000,
          examined: 20,
        },
      },
      myFavorite: {
        list: [],
        loadType: 2,
        total: 0,
        form: {
          page: 1,
          page_size: 20,
        },
      },
      myComment: {
        list: [],
        loadType: 2,
        total: 0,
        form: {
          page: 1,
          page_size: 20,
          status: 20,
        },
      },
    };
  },
  computed: {
    userInfo() {
      let countryList = this.$store.state.over.countryList;
      let userInfo = this.$store.state.user.userInfo;
      let country_name = "";
      for (let i = 0; i < countryList.length; i++) {
        if (userInfo.country_code == countryList[i].code) {
          country_name = countryList[i].name;
        }
      }
      try {
        userInfo["country_name"] = country_name;
        userInfo.sex =
          userInfo.sex == 1 || userInfo.sex == "1" ? "female" : "male";
      } catch (error) {}

      return userInfo;
    },
  },
  mounted() {
    this.getUserInfo();
    this.getMyBlogList();
    this.getmyFavoriteList();
    this.getMyCommentList();
  },
  methods: {
    //点击博客
    clickBlog(item) {
      this.$router.push("/blog/" + item.id);
    },
    //点击收藏商品
    clickFavo(item) {
      console.log(item);
      this.$router.push(
        "/product/" +
          item.product.id +
          "/" +
          tool.urlCheckForMenuTitle(item.product.title)
      );
    },
    //点击会员
    clickAccount() {
      this.$router.push("/user/account");
    },
    //滚动我的博客
    blogScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.blogPanel);
      if (bool && this.myBlog.loadType == 1) {
        this.myBlog.form.page++;
        this.getMyBlogList();
      }
    },
    //获取我的博客列表(已审核)
    async getMyBlogList() {
      this.myBlog.loadType = 2;
      let res = await this.$store.dispatch("user/myBlog", this.myBlog.form);
      if (res.code == 0) {
        this.myBlog.list = this.myBlog.list.concat(res.data.list);
        //console.log(this.myBlog.list);
        this.myBlog.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myBlog.loadType = 4;
        } else if (res.data.list.length < this.myBlog.form.page_size) {
          this.myBlog.loadType = 3;
        } else {
          this.myBlog.loadType = 1;
        }
      }
    },
    //滚动我的收藏
    blogScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.favoritePanel);
      if (bool && this.myFavorite.loadType == 1) {
        this.myFavorite.form.page++;
        this.getmyFavoriteList();
      }
    },
    //获取我的收藏列表
    async getmyFavoriteList() {
      this.myFavorite.loadType = 2;
      let res = await this.$store.dispatch(
        "user/collectionList",
        this.myFavorite.form
      );
      if (res.code == 0) {
        this.myFavorite.list = this.myFavorite.list.concat(res.data.list);
        this.myFavorite.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myFavorite.loadType = 4;
        } else if (res.data.list.length < this.myFavorite.form.page_size) {
          this.myFavorite.loadType = 3;
        } else {
          this.myFavorite.loadType = 1;
        }
      }
    },
    //滚动我的评论
    commentScroll(e) {
      let bool = tool.panelScrollToBottom(this.$refs.commentPanel);
      if (bool && this.myComment.loadType == 1) {
        this.myComment.form.page++;
        this.getMyCommentList();
      }
    },
    //获取我的评论列表
    async getMyCommentList() {
      this.myComment.loadType = 2;
      let res = await this.$store.dispatch(
        "user/myComments",
        this.myComment.form
      );
      if (res.code == 0) {
        this.myComment.list = this.myComment.list.concat(res.data.list);
        console.log(this.myComment.list);
        this.myComment.total = res.data.paginatio.total;
        if (res.data.paginatio.total == 0) {
          this.myComment.loadType = 4;
        } else if (res.data.list.length < this.myComment.form.page_size) {
          this.myComment.loadType = 3;
        } else {
          this.myComment.loadType = 1;
        }
      }
    },
    //签到
    async clickSignIn() {
      if (!this.isSignIn) {
        let res = await this.$store.dispatch("user/signin");
        if (res.code == 0) {
          localStorage.setItem(
            "userSignTime" + this.userInfo.id,
            tool.getLocalTimeryymmhh()
          );
          this.isSignIn = true;
          this.userInfo.point += 0.1;
        } else {
          localStorage.setItem(
            "userSignTime" + this.userInfo.id,
            tool.getLocalTimeryymmhh()
          );
          this.isSignIn = true;
          this.$toast(res.msg);
        }
      }
    },
    //跳转修改用户信息
    updateUserInfo() {
      this.$router.push({
        path: "/user/setting",
      });
    },
    //点击按钮
    clickMenu(index) {
      //退出登录
      if (index == 3) {
        this.tips.startLoadingToast();
        localStorage.setItem("userInfo", {});
        this.$store.commit("user/setIsLogin", false);
        this.$store.commit("user/setCollectionList", []);
        this.$store.commit("menu/setCartList", []);
        setTimeout(() => {
          this.$router.replace({
            path: "/",
          });
          this.tips.closeToast();
        }, 1000);
        this.$store.dispatch("user/logout");
      } else {
        this.$router.push({
          path: this.menuList[index].url,
        });
      }
    },
    //获取用户信息
    getUserInfo() {
      this.tips.startLoadingToast();
      this.$store.dispatch("user/userInfo", {}).then((res) => {
        this.tips.closeToast();
        //console.log(res);
        if (res.code == 0 && res.data != undefined) {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          this.$store.commit("user/setUserInfo", res.data);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "user.less";
</style>